<template>
    <form method="post">
        <div style="width: 100%">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left">
                <font style="font-size: 25px; font-family: 微软雅黑">单位信息</font>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <br />
                <br />
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位名称" prop="unitName">
                            <el-input v-model="ruleForm.unitName" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单位编号" prop="unitNum">
                            <el-input v-model="ruleForm.unitNum" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位类型" prop="unitType">
                            <el-radio-group v-model="ruleForm.unitType" placeholder="" style="width: 90%">
                                <el-radio :label="1" :value="1">施工单位</el-radio>
                                <el-radio :label="2" :value="2">监理单位</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="ruleForm.status" style="width: 90%">
                                <el-radio :label="1" :value="1">启用</el-radio>
                                <el-radio :label="0" :value="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="ruleForm.phone" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row>
                    <el-col :span="12">
                        <el-form-item label="注册日期" prop="startTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.startTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="禁用日期" prop="endTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.endTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="排序号" prop="serialNumber">
                            <el-input v-model.number="ruleForm.serialNumber" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人" prop="unitPrincipal">
                            <el-button type="text" @click="showdialogVisible1">选择负责人</el-button>
                            <el-dialog title="配置人员" :visible.sync="dialogTableVisible">
                                <el-transfer
                                    v-model="transferValue"
                                    :data="transferData"
                                    :props="{ key: 'id', label: 'userName' }"
                                    filterable
                                    :titles="['全部人员', '已选择人员']"
                                    :button-texts="['移除', '选取']"
                                    right-check-change="change"
                                />
                                <el-button type="primary" class="distributeBtn" @click="distribute()">确认分配</el-button>
                            </el-dialog>

                            <el-input
                                v-model="ruleForm.unitPrincipal"
                                placeholder=""
                                style="width: 90%"
                                @click="showdialogVisible1()"
                                disabled
                            ></el-input>
                            <!-- <span class="fontNormal" style="cursor: pointer"> 分配人员 </span>
                             -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
                <!-- <el-dialog :visible.sync="dialogVisible1" width="60%" id="wyff"> -->
                <!-- title -->
                <!-- <div slot="title" style="text-align: center">
                        <span>分发人员</span>
                    </div> -->
                <!-- 穿梭框 -->
                <!-- <el-transfer
                        v-model="transferValue"
                        :data="transferData"
                        :props="{ key: 'id', label: 'userName' }"
                        filterable
                        :titles="['全部人员', '已选择人员']"
                        :button-texts="['移除', '选取']"
                    />
                    <el-button type="primary" class="distributeBtn" @click="distribute()">确认分配</el-button>
                </el-dialog> -->
            </el-form>
        </div>
    </form>
</template>

<script>
import label from '@/api/sys/sgunit';
import Vue from 'vue';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            transferValue: [],
            transferData: [],
            // dialogVisible1: false,
            ruleForm: {},
            rules: {
                unitName: [{ required: true, message: '请填写名称', trigger: 'blur' }],
                unitNum: [{ required: true, message: '请填写编号', trigger: 'blur' }],
                unitType: [{ required: true, message: '请选择单位类型', trigger: 'blur' }],
                status: [{ required: true, message: '请选择单位类型', trigger: 'blur' }],
                serialNumber: [{ type: 'number', message: '必须为数字', trigger: 'blur' }]
            },
            dialogTableVisible: false,
            formLabelWidth: '120px'
        };
    },

    created() {
        this.init();
        setTimeout(() => {
            this.getDistributeData();
        }, 1000);
    },

    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },

    methods: {
        showdialogVisible1() {
            // if (this.batchList.length == 0) return this.$message.error('请选择要操作的项目');
            // this.dialogVisible1 = true;
            this.dialogTableVisible = true;
        },
        async getDistributeData() {
            const { data: res } = await this.$http.post('/user/findall');
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            // label.getpeople(id).then((rep) => {
            //     for (var a = 0; a < rep.data.length; a++) {
            //         this.transferValue.push(rep.data[a].id);
            //     }
            //     console.log(this.transferValue);
            // });
            if (this.ruleForm.id != null) {
                label.getpeople(this.ruleForm.id).then((rep) => {
                    // console.log(rep.data, 11111111111111111);
                    for (var a = 0; a < rep.data.length; a++) {
                        this.transferValue.push(rep.data[a].id);
                    }
                });
                this.transferData = res.data;
            } else {
                this.transferData = res.data;
            }
            // console.log(res.data, 22222222222222222222);
            // console.log(this.transferData, 1212121212);
        },

        distribute() {
            if (this.transferValue.length === 0) return this.$message.error('请选择分配的人员');
            // form.append('unitId', this.unitid);
            // form.append('userIds', this.transferValue);
            // label.mission(form).then((rep) => {
            //
            // });
            // this.transferValue = [];
            let i = [];
            for (var a = 0; a < this.transferValue.length; a++) {
                i.push(this.transferValue[a]);
                for (let b = 0; b < this.transferData.length; b++) {
                    if (i == this.transferData[b].id) {
                        this.ruleForm.unitPrincipal=this.transferData[b].userName;
                        // console.log(this.ruleForm.unitPrincipal)
                    }
                    // console.log(this.transferData[b].userName,1111111111111111);

                        // console.log(this.ruleForm.unitPrincipal,111);
                }
            }
            // console.log(i);
            // console.log(traverse)
            // function traverse(array) {
            //     array.forEach((item) => {

            //     });
            // }
            // traverse(this.transferData)
            this.$message.success('配置成功');
            this.dialogTableVisible = false;
        },

        change() {
            // console.log(this.transferValue);
            // console.log(this.transferData);
        },

        init() {
            //判断路径有id值,做修改
            if ($('#idframe', window.parent.document).attr('data-id') != 'undefined') {
                //从路径获取id值
                const id = $('#idframe', window.parent.document).attr('data-id');
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
            }
        },

        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                //修改
                this.update();
            }
        },
        // 验证是否为数字
        num(serialNumber) {
            var numReg = /^[0-9]*$/;
            var numRe = new RegExp(numReg);
            if (!numRe.test(serialNumber)) {
                this.$message({
                    type: 'warning',
                    message: '请输入数字 ',
                    showClose: true
                });
                return false;
            }
        },
        //验证电话
        phone(phone) {
            if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone)) {
                alert('手机号码有误，请重填');
                return false;
            }
        },
        onSubmit() {
            if (this.ruleForm.serialNumber != ' ') {
                if (this.num(this.ruleForm.serialNumber) == false) {
                    return;
                }
            }
            if (this.ruleForm.phone != ' ') {
                if (this.phone(this.ruleForm.phone) == false) {
                    return;
                }
            }
            Vue.delete(this.ruleForm, 'createTime');
            Vue.delete(this.ruleForm, 'updateTime');
            let form = new FormData();
            for (var item in this.ruleForm) {
                form.append(item, this.ruleForm[item]);
                // console.log(this.ruleForm)
            }
            form.append('userIds', this.transferValue);

            label.save(form).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                setTimeout(() => {
                    $('#idcloseclick', parent.document).click();
                }, 1000);
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        shutdown() {
            $('#idcloseclick', parent.document).click();
            window.close();
        },

        getInfo(id) {
            label.openInfo(id).then((response) => {
                // console.log(response.data);
                this.ruleForm = response.data;
            });
        },

        update() {
            if (this.ruleForm.serialNumber != ' ') {
                if (this.num(this.ruleForm.serialNumber) == false) {
                    return;
                }
            }
            Vue.delete(this.ruleForm, 'createTime');
            Vue.delete(this.ruleForm, 'updateTime');
            let form = new FormData();
            for (var item in this.ruleForm) {
                form.append(item, this.ruleForm[item]);
                // console.log(this.ruleForm)
            }
            form.append('userIds', this.transferValue);
            label.updateInfo(form).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                setTimeout(() => {
                    $('#idcloseclick', parent.document).click();
                }, 1000);
            });
        }

        //
    }
};
</script>
<style lang="less">
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
.fontNormal {
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
/* 外业分发任务对话框样式 */
/deep/ #wyff .el-transfer__buttons button {
    display: block;
    margin: 0;
    margin: 10px 0;
}
/deep/ #wyff .el-transfer__buttons span {
    margin-left: 0;
}
/deep/ #wyff .el-transfer-panel {
    width: 340px;
}
/deep/ #wyff .el-dialog__body {
    padding: 10px 20px;
    /* text-align: center; */
}
/deep/ #wyff .el-dialog {
    height: 420px;
}
.distributeBtn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.el-transfer-panel {
    width: 295px;
}

.el-dialog {
    width: 70%;
}

.el-transfer {
    font-size: 14px;
    display: flex;
    justify-content: space-around;
}
</style>